// 用户管理弹窗
const userManagermodal = `
<div class="modal-dialog" role="document" style="width: 1100px">  
  <div class="modal-content">  
    <div class="modal-header">  
        <button type="button" class="close" id="closebutton" aria-label="Close">
          <span  aria-hidden="true">×</span></button>  
        <h4 class="modal-title" id="exampleModalLabel">用户管理</h4>  
    </div>  
    <div class="modal-body"> 
      <div class="navbar"> 
        <ul class="nav nav-tabs">
          <li role="presentation" class="active">
          <a href="#tabhome" data-toggle="tab">Home</a>
          </li>
          <li role="tabUserManage">
          <a href="#tabUserManage" data-toggle="tab">用户管理</a>
          </li>
        </ul>
      </div>
      <div class="tab-content">
        <div id="tabhome" class="tab-pane fade in active ">
          <div style="display:flex">
            <div id="piechart" ref="piechart" style="width: 500px; height: 400px; left:0"></div>
            <div id="line" ref="line" style="width: 500px; height: 400px; right:0"></div> 
          </div>
        </div>

        <div id="tabUserManage" class="tab-pane fade ">
          <div class="panel-body" style="paddingtop:0px;">
            <div class="panel panel-default">
                
            </div>       
            <div id="toolbar" class="btn-group">
                <button id="btn_add" type="button" class="btn btn-default" onclick="addUser()">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
                </button>
                <button id="btn_edit" type="button" class="btn btn-default" onclick="addUserByFile()">
                    <span class="glyphicon glyphicon-log-in" aria-hidden="true"></span>批量添加
                </button>
                <button id="btn_delete" type="button" class="btn btn-default" onclick="delUsers()">
                    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>批量删除
                </button>
            </div>
            <table id="tb_usermanage" data-row-style="rowStyle"></table>
          </div>
        </div>
      </div>
    </div>  
    <div class="modal-footer">  
        <button type="button" class="btn btn-default" id="disscardChange">退出</button>   
    </div> 
</div>
`

const AddTipsmodal = `
  <div class="modal-dialog" role="document">  
    <div class="modal-content">  
      <div class="modal-header">  
        <button type="button" class="close" id="closebutton" aria-label="Close">
        <span  aria-hidden="true">×</span></button>  
        <h4 class="modal-title" id="exampleModalLabel">新增用户</h4>  
      </div>  
      <div class="modal-body">  
        <form id="adduserForm">  
            <div class="form-group"> 
              <label for="recipient-name" class="control-label" >用户名:</label>  
              <input type="text" class="form-control " id="addUsername" name="addUsername"> 
            </div>  
            <div class="form-group">  
                <label for="message-text" class="control-label">用户密码:</label>  
                <input type="password" class="form-control" id="addUserPsw" name="addUserPsw">  
            </div>  
            <div class="form-group">  
              <label for="message-text" class="control-label">用户类型:</label>  
              <input type="text" class="form-control" id="addUserType" name="addUserType">   
            </div>  
            <div class="form-group">  
              <label for="message-text" class="control-label">用户邮箱:</label>  
              <input type="text" class="form-control" id="addUserEmail" name="addUserEmail">   
            </div> 
            <div class="form-group">  
              <label for="message-text" class="control-label">用户地址:</label>  
              <input type="text" class="form-control" id="addUserAddress" name="addUserAddress">   
            </div>
        </form>  
      </div>  
      <div class="modal-footer">  
        <button type="button" class="btn btn-default" id="disscardAdduser">取消</button>  
        <button type="button" class="btn btn-primary" id="confirmAdduser">确定</button>  
      </div>  
    </div>
  </div>
`
const addByFile = `
<div class="modal-dialog" role="document"> 
<div class="modal-content">
  <div class="modal-header">  
    <button type="button" class="close" id="closebutton" aria-label="Close">
    <span  aria-hidden="true">×</span></button>  
    <h4 class="modal-title" id="exampleModalLabel">批量导入</h4>  
  </div>
  <div class="modal-body">
    <input type="file" id="excel-file">
    <table id="tb_excel"></table>
  </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" id="cancleAddUsers">取消</button>  
      <button type="button" class="btn btn-primary" id="confirmAddusers">确定</button>
    </div>
</div>
`
// 用户管理入口
function userManage() {
  $('body').on('click', '#userManager', function () {
    if ($('#modal').children().length != 0) {
      $('#modal div').remove()
    }
    $('#modal').append(userManagermodal)
    $('#modal').modal('show')

    // x按钮，关闭表单，清空数据
    $('#modal').on('click', '#closebutton', function () {
      $('#modal ').modal('hide')
      $('#modal div').remove()
    })

    // 取消修改
    $('#modal').on('click', '#disscardChange', function () {
      $('#modal').modal('hide')
      $('#modal div').remove()
    })
    // 绘制饼状图
    getPieData()
    // 折线图
    getLineData()
    // 用户list表格
    InitMainTable()
  })
}

// 饼状图
function drawPie(piedata) {
  var pieChart = echarts.init(document.getElementById('piechart'))
  pieChart.setOption({
    title: {
      text: '用户分布统计',
      subtext: 'lunched by admin',
      left: 'center',
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c} ({d}%)',
    },
    legend: {
      type: 'scroll',
      orient: 'vertical',
      left: 5,
      top: 20,
      bottom: 20,
      data: piedata,
    },
    series: [
      {
        name: 'user_type',
        type: 'pie', // 设置图表类型为饼图
        radius: '55%', // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
        data: JSON.parse(JSON.stringify(piedata)),
      },
    ],
  })
}

function getPieData() {
  $.ajax({
    type: 'GET',
    url: 'http://localhost:3000/users/groupnum', // 获取自己系统后台用户信息接口
    success: function (data) {
      drawPie(data.result)
    },
    error: function (data) {
      alert(data.result)
    },
  })
}

// line折线图
function AdrawLine(data) {
  var lineChart = echarts.init(document.getElementById('line'))
  const aa = JSON.parse(JSON.stringify(data))
  let base = +new Date(2020, 0)
  let newdata = [[base, 0]]
  for (const i of aa) {
    newdata.push([+new Date(i.days), i.value])
  }

  lineChart.setOption({
    tooltip: {
      trigger: 'axis',
      position: function (pt) {
        return [pt[0], '100%']
      },
    },
    title: {
      left: 'center',
      text: '注册时间统计表',
    },
    toolbox: {
      feature: {
        dataZoom: {
          yAxisIndex: 'none',
        },
        restore: {},
        saveAsImage: {},
      },
    },
    xAxis: {
      type: 'time',
      boundaryGap: false,
    },
    yAxis: {
      type: 'value',
      boundaryGap: [0, '100%'],
    },
    dataZoom: [
      {
        type: 'inside',
        start: 0,
        end: 20,
      },
      {
        start: 0,
        end: 20,
      },
    ],
    series: [
      {
        name: 'Data',
        type: 'line',
        smooth: true,
        symbol: 'none',
        areaStyle: {},
        data: newdata,
      },
    ],
  })
}

function getLineData() {
  $.ajax({
    type: 'GET',
    url: 'http://localhost:3000/users/time', // 获取自己系统后台用户信息接口
    success: function (data) {
      AdrawLine(data.result)
    },
    error: function (data) {
      alert(data.result)
    },
  })
}

// 新增用户
function addUser() {
  if ($('#tipsModal').children().length != 0) {
    $('#tipsModal div').remove()
  }
  $('#tipsModal').append(AddTipsmodal)
  $('#tipsModal').modal('show')

  // x按钮，关闭表单，清空数据
  $('#tipsModal').on('click', '#closebutton', function () {
    $('#tipsModal ').modal('hide')
    $('#tipsModal div').remove()
  })
  // 取消修改
  $('#tipsModal').on('click', '#disscardAdduser', function () {
    $('#tipsModal').modal('hide')
    $('#tipsModal div').remove()
  })

  // 确认新增
  $('#tipsModal').on('click', '#confirmAdduser', function () {
    const userPsw = $('#addUserPsw').val()
    const username = $('#addUsername').val()
    const usertype = $('#addUserType').val()
    const useremail = $('#addUserEmail').val()
    const useraddress = $('#addUserAddress').val()
    const encodePas = md5encode(username + md5encode(userPsw))
    $.ajax({
      type: 'POST',
      url: 'http://localhost:3000/users/new', // 获取自己系统后台用户信息接口
      data: JSON.stringify({
        username: username,
        userpassword: encodePas,
        usertype: usertype,
        useremail: useremail,
        useraddress: useraddress,
      }),
      dataType: 'json',
      contentType: 'application/json; charset=utf-8',
      success: function (data) {
        if (data) {
          if (data.code == '0') {
            alert('添加成功!')

            //判断返回值，这里根据的业务内容可做调整
            setTimeout(function () {
              //做延时以便显示登录状态值
              $('#tb_usermanage').bootstrapTable('refresh')
              //刷新页面
              $('#tipsModal').modal('hide')
              $('#tipsModal div').remove()
            }, 10)
          } else {
            alert(data.message) //显示登录失败的原因
            return false
          }
        }
      },
      error: function (data) {
        alert(data.message)
      },
    })
  })
}
//批量删除用户
function delUsers() {
  var rows = $('#tb_usermanage').bootstrapTable('getSelections')
  var ids = []
  var len = rows.length
  for (var i = 0; i < len; i++) {
    ids.push(rows[i].user_id)
  }
  $.ajax({
    url: 'http://localhost:3000/users/deleteUsers',
    dataType: 'json',
    traditional: true, //属性在这里设置
    method: 'post',
    data: {
      ids: ids,
    },
    success: function (data) {
      if (data.code == '0') {
        alert('删除成功')
        $('#tb_usermanage').bootstrapTable('refresh')
      } else {
        alert(data.result + '删除失败')
      }
    },
    error: function () {
      alert('删除失败')
    },
  })
}
//根据用户id删除
function delUserbyId(id) {
  $.ajax({
    url: 'http://localhost:3000/users/delete/' + id,
    dataType: 'json',
    traditional: true, //属性在这里设置
    method: 'put',
    success: function (data) {
      if (data.code == '0') {
        alert('删除成功')
        $('#tb_usermanage').bootstrapTable('refresh')
      } else {
        alert(data.result + '删除失败')
      }
    },
    error: function () {
      alert('删除失败')
    },
  })
}
// 下线用户
function pushOffline(row) {
  if (row.user_onlinestatus) {
    $.ajax({
      url: 'http://localhost:3000/users/offline/' + row.user_id,
      dataType: 'json',
      traditional: true, //属性在这里设置
      method: 'put',
      success: function (data) {
        if (data.code == '0') {
          alert('下线成功')
          $('#tb_usermanage').bootstrapTable('refresh')
        } else {
          alert(data.result + '下线失败')
        }
      },
      error: function () {
        alert('下线失败')
      },
    })
  } else {
    alert('用户不在线!')
  }
}
// 解除用户下线removeStatus
function removeStatus(row) {
  if (row.user_onlinestatus == '-99999') {
    $.ajax({
      url: 'http://localhost:3000/users/removestatus/' + row.user_id,
      dataType: 'json',
      traditional: true, //属性在这里设置
      method: 'put',
      success: function (data) {
        if (data.code == '0') {
          alert('解除成功')
          $('#tb_usermanage').bootstrapTable('refresh')
        } else {
          alert(data.result + '解除失败')
        }
      },
      error: function () {
        alert('解除失败')
      },
    })
  } else {
    alert('用户不在黑名单!')
  }
}
// // email格式
// function emailFormatter(value, row, index) {
//   return `<a href='mailto: + ${value}'+ 'title='单击打开连接'> ${value} </a>`
// }

// 添加操作按钮
function operationTable(value, row, index) {
  return (
    // '<button class="btn btn-warning" onclick= pushOffline(' +
    // row +
    // ')>下线 </button>' +
    `<button class="btn btn-warning" onclick='pushOffline(
    ${JSON.stringify(row)}
    )'> 下线 </button>` +
    '&nbsp;&nbsp;' +
    `<button class="btn btn-danger" onclick='removeStatus(${JSON.stringify(
      row
    )})'> 解除</button>` +
    '&nbsp;&nbsp;' +
    `<button class="btn btn-danger" onclick="delUserbyId(${value})"> 删除 </button>`
  )
}
// 表格样式状态
function rowStyle(row, index) {
  if (row.user_onlinestatus == 'yes') {
    return { css: { color: '#51ff35  !important' } }
  }
  if (row.user_onlinestatus == 'no') {
    return { css: { color: '#8c95a4' } }
  }
  if (row.user_onlinestatus == '-99999') {
    return { css: { color: '#e06c75' } }
  }
  return { css: {} }
}

// 用户list表格设置
function InitMainTable() {
  //记录页面bootstrap-table全局变量$table，方便应用
  var queryUrl = 'http://localhost:3000/users/userList'
  $('#tb_usermanage').bootstrapTable({
    url: queryUrl, //请求后台的URL（*）
    method: 'GET', //请求方式（*）
    toolbar: '#toolbar', //工具按钮用哪个容器
    striped: true, //是否显示行间隔色
    cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
    pagination: true, //是否显示分页（*）
    sortable: true, //是否启用排序
    sortOrder: 'asc', //排序方式
    sidePagination: 'server', //分页方式：client客户端分页，server服务端分页（*）
    pageNumber: 1, //初始化加载第一页，默认第一页,并记录
    pageSize: 5, //每页的记录行数（*）
    pageList: [5, 10, 20, 50], //可供选择的每页的行数（*）
    search: true, //是否显示表格搜索
    searchable: true,
    searchOnEnterKey: true,
    strictSearch: false,
    showColumns: true, //是否显示所有的列（选择显示的列）
    showRefresh: true, //是否显示刷新按钮
    minimumCountColumns: 2, //最少允许的列数
    clickToSelect: true, //是否启用点击选中行
    //height: 500,                      //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
    uniqueId: 'ID', //每一行的唯一标识，一般为主键列
    showToggle: true, //是否显示详细视图和列表视图的切换按钮
    cardView: false, //是否显示详细视图
    detailView: false, //是否显示父子表
    showExport: true, //导入功能，需要引入插件
    exportDataType: 'basic',
    editable: true, //编辑功能，引入插件
    responseHandler: function (res) {
      return {
        total: res.result.total,
        rows: res.result.rows,
      }
    },
    //得到查询的参数
    queryParams: function (params) {
      //这里的键的名字和控制器的变量名必须一致，这边改动，控制器也需要改成一样的
      var temp = {
        // usertype:,
        size: params.limit, //页面大小
        page: params.offset / params.limit + 1, //页码
        sort: params.sort, //排序列名
        sortOrder: params.order, //排位命令（desc，asc）
      }
      return temp
    },
    // 列数据
    columns: [
      {
        checkbox: true,
        visible: true, //是否显示复选框
      },
      {
        field: 'user_id',
        title: 'ID',
        sortable: true,
        align: 'center',
        searchable: true,
      },
      {
        field: 'user_name',
        title: 'name',
        sortable: true,
        align: 'center',
        searchable: true,
        editable: {
          type: 'text',
          title: 'name',
          validate: function (v) {
            if (!v) return '不能为空'
          },
        },
      },
      {
        field: 'user_type',
        title: '用户组',
        sortable: true,
        align: 'center',
        searchable: true,
        editable: {
          type: 'text',
          title: 'type',
          validate: function (v) {
            if (!v) return '不能为空'
          },
        },
      },
      {
        field: 'user_onlinestatus',
        sortable: true,
        title: '在线状态',
        align: 'center',
      },
      {
        field: 'user_add',
        title: '地址',
        align: 'center',
        searchable: true,
        editable: {
          type: 'text',
          title: 'address',
          validate: function (v) {
            if (!v) return '不能为空'
          },
        },
      },
      {
        field: 'user_registTime',
        title: '注册时间',
        sortable: true,
        align: 'center',
        searchable: true,
      },
      {
        field: 'user_email',
        title: '邮箱',
        align: 'center',
        searchable: true,
        editable: {
          type: 'text',
          title: 'Email',
          validate: function (v) {
            if (!v) return '不能为空'
          },
        },
      },
      {
        field: 'user_id',
        title: '操作',
        align: 'center',
        valign: 'middle',
        formatter: 'operationTable',
      },
    ],
    onLoadSuccess: function () {},
    onLoadError: function () {},
    // 保存编辑
    onEditableSave: function (field, row, oldValue, $el) {
      $.ajax({
        type: 'post',
        url: 'http://localhost:3000/users/edit',
        data: row,
        dataType: 'JSON',
        success: function (data, status) {
          console.log(data)
          if (data.code == '0') {
            alert('提交数据成功')
            $('#tb_usermanage').bootstrapTable('refresh')
          } else {
            alert(data.message)
          }
        },
        error: function () {
          alert('编辑失败')
        },
      })
    },
  })
}

//批量添加
function addUserByFile() {
  if ($('#tipsModal').children().length != 0) {
    $('#tipsModal div').remove()
  }
  $('#tipsModal').append(addByFile)
  $('#tipsModal').modal('show')

  // x按钮，关闭表单，清空数据
  $('#tipsModal').on('click', '#closebutton', function () {
    $('#tipsModal ').modal('hide')
    $('#tipsModal div').remove()
  })
  // 取消修改
  $('#tipsModal').on('click', '#cancleAddUsers', function () {
    $('#tipsModal').modal('hide')
    $('#tipsModal div').remove()
  })
  // 读取excel
  $('#excel-file').change(function (e) {
    var files = e.target.files
    var fileReader = new FileReader()
    fileReader.onload = function (ev) {
      try {
        var data = ev.target.result,
          workbook = XLSX.read(data, {
            type: 'binary',
          }), // 以二进制流方式读取得到整份excel表格对象
          users = [] // 存储获取到的数据
      } catch (e) {
        console.log('文件类型不正确')
        return
      }
      // 表格的表格范围，可用于判断表头是否数量是否正确
      var fromTo = ''
      // 遍历每张表读取
      for (var sheet in workbook.Sheets) {
        if (workbook.Sheets.hasOwnProperty(sheet)) {
          fromTo = workbook.Sheets[sheet]['!ref']
          users = users.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]))
          // break; // 如果只取第一张表，就取消注释这行tb_excel
        }
      }
      tb_excel(users)
    }

    // 以二进制方式打开文件
    fileReader.readAsBinaryString(files[0])
  })

  // 确认新增
  $('#tipsModal').on('click', '#confirmAddusers', function () {
    const exceldata = $('#tb_excel').bootstrapTable('getData')
    for (var item of exceldata) {
      item.user_password = md5encode(
        item.user_name + md5encode(item.user_password)
      )
    }

    console.log(exceldata, JSON.stringify(exceldata))
    $.ajax({
      url: 'http://localhost:3000/users/newbyfile',
      dataType: 'json',
      traditional: true, //属性在这里设置
      method: 'post',
      traditional: true,
      data: {
        exceldata: JSON.stringify(exceldata),
      },
      success: function (data) {
        if (data.code == '0') {
          alert('批量添加成功')
          $('#tipsModal').modal('hide')
          $('#tipsModal div').remove()
          $('#tb_usermanage').bootstrapTable('refresh')
        } else {
          alert(data.result + '批量添加失败')
        }
      },
      error: function () {
        alert('批量添加失败')
      },
    })
  })
}

// md5加密
function md5encode(word) {
  return CryptoJS.MD5(word).toString()
}

//将读取的ExcelJson显示到表格
function tb_excel(excel) {
  $('#tb_excel').bootstrapTable({
    data: excel,
    pagination: true, //是否显示分页（*）
    sortable: true, //是否启用排序
    sortOrder: 'asc', //排序方式
    sidePagination: 'client', //分页方式：client客户端分页，server服务端分页（*）
    pageNumber: 1, //初始化加载第一页，默认第一页,并记录
    pageSize: 5, //每页的记录行数（*）
    pageList: [5, 10, 20, 50], //可供选择的每页的行数（*）
    columns: [
      {
        field: 'no',
        align: 'center',
        title: '序号',
        formatter: function (value, row, index) {
          return index + 1
        },
      },
      {
        field: 'user_name',
        align: 'center',
        title: 'user_name',
      },
      {
        field: 'user_password',
        align: 'center',
        title: 'user_password',
      },
      {
        field: 'user_type',
        align: 'center',
        title: 'user_type',
      },
      {
        field: 'user_add',
        align: 'center',
        title: 'user_add',
      },
      {
        field: 'user_email',
        align: 'center',
        title: 'user_email',
      },
    ],
  })
}
